<template>
	<view class="default-box">
		<view class="box-main-info">
			<view class="school-name click-active-white mb-2" :style="{
				color: titleColor
			}" @click="navToSchool">
				<view class="text-bold">
					{{ props.schoolInfo.name }}
				</view>
				<view class="icon">
					<image src="../../../static/images/school_1.png" />
				</view>
			</view>
			
			<view class="tag-row mb-2">
				<view class="tag" v-for="(tag, index) in props.schoolInfo.tags" :key="index">
					{{ tag }}
				</view>
			</view>
			
			<view class="info-row mb-2">
				<view class="single-info">
					<text class="middle-text" style="font-size:34rpx">校长：</text>
					<text class="middle-text padding-right">{{ props.schoolInfo.principal }}</text>
				</view>
				<view class="single-info click-active-white" @click="phoneCall(schoolInfo.principal_phone)">
					<text class="text-blue cuIcon-dianhua" style="font-size: 34rpx"></text>
					<text class="middle-text">{{ props.schoolInfo.principal_phone }}</text>
				</view>
			</view>
			
			<view class="info-row mb-2">
				<view class="single-info">
					<text class="middle-text" style="font-size:34rpx">教职工：</text>
					<text class="middle-text">{{ props.schoolInfo.teacherCount || "未知" }}</text>
				</view>
				<view class="single-info">
					<text class="middle-text" style="font-size:34rpx">学生：</text>
					<text class="middle-text">{{ props.schoolInfo.studentCount || "未知" }}</text>
				</view>
			</view>
			
			<view class="info-row mb-2" v-if="!contactShow">
				<view>
					<text class="middle-text" style="font-size:34rpx">联络人：</text>
					<text class="middle-text padding-right">{{ props.schoolInfo.contact_name }}</text>
				</view>
			</view>
			
			
			
			<!-- <view class="contact-school click-active-white" v-if="contactShow" @click.stop="handleContact(schoolInfo.contact_phone)">
				<text class="text-blue cuIcon-dianhua"></text>
				<text class="large-text" style="font-size:34rpx">联系学校</text>
			</view> -->
		</view>
		
		
		<view class="division-line" v-if="contactShow"></view>
		<view class="contact-school click-active-white" v-if="contactShow && userInfo.role === 1" @click.stop="phoneCall(schoolInfo.contact_phone)">
			<text class="text-blue cuIcon-dianhua" style="font-size: 38rpx"></text>
			<text class="large-text" style="font-size: 32rpx">学校联络人 ({{ schoolInfo.contact_name + schoolInfo.contact_phone }})</text>
			
		</view>
		<view class="contact-school click-active-white" v-if="contactShow && userInfo.role === 2" @click="modalShow">
			<view class="info-row" v-if="contactShow">
				<view class="click-active-white">
					<text class="text-blue cuIcon-dianhua" style="font-size: 34rpx"></text>
					<text class="middle-text">责任督学</text>
				</view>
			</view>
		</view>
		
		
	</view>
	
	
	<Modal ref="modal">
		<view
			class="padding-xl flex justify-between align-center click-active-white"
			v-for="(item, index) in schoolInfo.superintendents"
			:key="index"
			@click="phoneCall(item.superintendentPhonenumber)"
		>
			<view class="flex align-center">
				<text class="cuIcon-phone" style="font-size: 44rpx;"></text>
				<view class="name middle-text">{{ item.superintendentName }}</view>
			</view>
			<view class="middle-text text-blue">
				<view class="phone">{{ item.superintendentPhonenumber || "暂无联系方式" }}</view>
			</view>
		</view>
	</Modal>
	
</template>

<script lang="ts" setup>
import { ref } from "vue"
import { router } from "@/router"
import store from "@/store/index.js"
import Modal from "@/components/Modal.vue"

const props = defineProps({
	schoolInfo: {
		type: Object,
		default: {}
	},
	contactShow: {
		type: Boolean,
		default: true
	},
	titleColor: {
		type: String,
		default: "#3974df"
	}
})

const userInfo = store.getters.userInfo
const modal = ref()

const phoneCall = (phone: string):void => {
	uni.makePhoneCall({
		phoneNumber: String(phone),
	})
}
const modalShow = () => {
	modal.value.show()
}

const navToSchool = ():void => {
	router.push("/pages/school/school?school_id=" + props.schoolInfo.id)
}
</script>

<style lang="stylus" scoped>
.default-box
	padding: 0
	.box-main-info
		padding: 40rpx 40rpx 20rpx
.tag-row
	display: flex
	flex-wrap: wrap
	.tag
		font-size 24rpx
		padding: 6rpx 18rpx
		border-radius 30rpx
		background-color: #f0f5ff
		color #3974df
		margin-right: 16rpx
		margin-bottom: 8rpx
.info-row
	display: flex
	align-items: center
	.single-info
		width: 50%
.division-line
	width: 100%
	height: 2rpx
	background-color: #ededed
	
.contact-school
	padding: 40rpx 0
	display: flex
	justify-content: center
	align-items: center
	height: 108rpx
	.cuIcon-dianhua
		font-size: 46rpx
		margin-right: 12rpx
.school-name
	font-size 40rpx
	color #3974df
	font-weight 400
	display: flex
	align-items: center
	justify-content: space-between
	.icon
		color #000
		width: 44rpx
		height: 44rpx
		image
			width 100%
			height: 100%
</style>